<template>
  <div class="h_full w_full pagewarpper hasfooter">
    <div class="pagewapperheader bg_fff flexbetween">
      <div class="c_text2 fw-6 f-14 flexcenter">
        <img
          src="@/assets/images/arrow-circle-left.png"
          class="lefticon commhover"
          alt=""
          @click="goBack"
        />
        任务中心
      </div>
    </div>
    <div class="pagewarpperbody">
      <div class="bg_fff">
        <el-form
          ref="queryParams"
          :model="queryParams"
          size="small"
          :inline="true"
          class="p-12 queryform"
        >
          <el-form-item prop="class" label="" class="mr-15">
            <el-select
              v-model="queryParams.class"
              clearable
              @change="handleQuery"
              placeholder="选择类型"
              style="width: 200px"
            >
              <el-option
                v-for="(item, index) in classList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="status" label="" class="mr-15">
            <el-select
              v-model="queryParams.status"
              clearable
              @change="handleQuery"
              placeholder="选择状态"
              style="width: 200px"
            >
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="status" label="" class="mr-15">
            <el-date-picker
              v-model="queryParams.times"
              type="daterange"
              range-separator="至"
              start-placeholder="创建开始时间"
              end-placeholder="创建结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="status" label="">
            <el-button size="small" @click="handleQuery">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="bg_fff">
        <el-table
          v-loading="loading"
          :data="tableList"
          class="commtable"
        >
          <el-table-column  
            label="任务提交时间"
            prop="userName"
            min-width="300"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{scope.row.times}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="任务类型"
            prop="userName"
            min-width="200px"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.groupusername }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="任务状态"
            prop="email"
            min-width="200px"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <i class="el-icon-circle-check c_52c41a mr-5"></i>{{ scope.row.type||'已完成' }}
            </template>
          </el-table-column>
          <el-table-column label="完成结果" header-align='center'>
            <el-table-column
              min-width="200px"
              :show-overflow-tooltip="true"
            >
              <template slot="header">
                <span class="pr-5">已执行群数</span>
                <el-tooltip class="item" effect="dark" content="群里有多个企微号存在时，只要一个企微号执行即视为已执行。" placement="top">
                  <i class="el-icon-question c_999"></i>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.num || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              min-width="200px"
              :show-overflow-tooltip="true"
            >
              <template slot="header">
                <span class="pr-5">未执行群数</span>
                <el-tooltip class="item" effect="dark" content="可能因为企微号离线、不是管理员等原因未能执行的群。" placement="top">
                  <i class="el-icon-question c_999"></i>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.num || 0 }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="操作者"
            prop="email"
            min-width="200px"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{scope.row.user||'主账号'}}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          class="mt-0"
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        numberstr: "",
      },
      classList: [
        { label: "打标签", value: 1 },
        { label: "群移除标签", value: 2 },
        { label: "移动标签", value: 3 },
        { label: "删除标签", value: 4 },
      ],
      statusList: [
        { label: "进行中", value: 1 },
        { label: "已完成", value: 2 },
      ],
      total: 0,
      loading: false,
      tableList: [
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
      ],
    };
  },
  methods: {
    getList() {},

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    goBack(){
      this.$router.back()
    },
  },
};
</script>
<style lang="scss" scoped>
.queryform .el-form-item {
  margin-bottom: 5px;
}
</style>